<!-- 微信公众号的登录回调页 -->
<template>
  <!-- 登陆页 -->
  <view class="container" style="background-image: url('../../static/images/login-bj.png')">
    <!-- <image class="login-bg" src="../../static/images/register_bg.png" mode=""></image> -->
    <view class="login-box">
      <!-- <view class="name">注册</view> -->
      <view class="login-from">
        <form class="" @submit="formSubmit">
          <view class="form-item">
            <!-- <view class="title">
							手机号
						</view> -->
            <input
              placeholder-style="font-size: 14px;"
              :maxlength="11"
              type="tel"
              name="phone"
              placeholder="请输入手机号"
            />
          </view>
          <view class="form-item">
            <!-- 	<view class="title">
							用户名
						</view> -->
            <input
              placeholder-style="font-size: 14px;"
              :maxlength="11"
              type="text"
              name="username"
              placeholder="请输入用户名"
            />
          </view>
          <view class="form-item">
            <!-- 	<view class="title">
							密码
						</view> -->
            <input
              placeholder-style="font-size: 14px;"
              type="password"
              :maxlength="11"
              :password="true"
              name="password"
              placeholder="请设置6位以上字母和数字"
            />
          </view>
          <view class="form-item">
            <!-- 	<view class="title">
							确认密码
						</view> -->
            <input
              placeholder-style="font-size: 14px;"
              type="password"
              :maxlength="11"
              :password="true"
              name="confirmPassword"
              placeholder="请确认密码"
            />
          </view>
          <view class="form-item">
            <!-- 	<view class="title">
							支付密码
						</view> -->
            <input
              placeholder-style="font-size: 14px;"
              type="password"
              :maxlength="6"
              :password="true"
              name="payPassword"
              placeholder="请输入支付密码(6位纯数字)"
            />
          </view>
          <view class="form-item">
            <view class="title"> 邀请码 </view>
            <input
              placeholder-style="font-size: 14px;"
              type="text "
              :value="formInfo.code"
              :disabled="formInfo.code ? true : false"
              name="code"
              placeholder="请输入邀请码"
            />
          </view>
          <!-- <view class="action">
						<text>登录</text>

						<text></text>
					</view> -->
          <button class="submit-btn" hover-class="none" form-type="submit" @click="sliderVerify">
            确认
          </button>
          <view class="agree">
            <checkbox-group @change="changeAgree">
              <label>
                <checkbox value="agree" color="#457DF0" style="transform: scale(0.6)" />
              </label>
            </checkbox-group>
            <text
              >我已阅读并同意<!-- <text style="color: #4667E2;">《用户服务协议》</text>、 --><text
                style="color: #950f16"
                @click="checkProtocol"
                >《隐私政策》</text
              >
            </text>
          </view>
        </form>
      </view>
    </view>
    <zmm-slider-verify
      ref="sliderVerifyRef"
      verifyImg=""
      @success="successHandle"
      @error="errorHandle"
      @close="closeHandle"
    ></zmm-slider-verify>
  </view>
</template>

<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import test from '@/sheep/helper/test.js';
import AuthUtil from '@/sheep/api/member/auth';
import { deepClone } from '@/sheep/helper/index';
const formInfo = reactive({
  username: '',
  password: '',
  phone: '',
  confirmPassword: '',
  payPassword: '',
  code: '',
});
const isAgree = ref(false);
onLoad(() => {
  var paraString = location.search;
  var paras = paraString.split('=');

  if (paras[1]) {
    formInfo.code = paras[1];
  } else {
    // formInfo.code = '1817840189498839042';
    formInfo.code = '1833464873004535810';
    2;
  }
  console.log('formInfo', formInfo);
});

// onLoad(async (options) => {
// 	// #ifdef H5
// 	// 将 search 参数赋值到 options 中，方便下面解析
// 	new URLSearchParams(location.search).forEach((value, key) => {
// 		options[key] = value;
// 	});
// 	// 执行登录 or 绑定，注意需要 await 绑定
// 	const event = options.event;
// 	const code = options.code;
// 	const state = options.state;
// 	if (event === 'login') { // 场景一：登录
// 		await sheep.$platform.useProvider().login(code, state);
// 	} else if (event === 'bind') { // 场景二：绑定
// 		await sheep.$platform.useProvider().bind(code, state);
// 	}

// 	// 检测 H5 登录回调
// 	let returnUrl = uni.getStorageSync('returnUrl');
// 	if (returnUrl) {
// 		uni.removeStorage({
// 			key: 'returnUrl'
// 		});
// 		location.replace(returnUrl);
// 	} else {
// 		// uni.redirectTo({
// 		// 	url: '/',
// 		// });
// 	}
// 	// #endif
// })
const checkProtocol = () => {
  uni.navigateTo({
    url: '/pages/public/richtext?title=隐私协议',
  });
};
const sliderVerifyRef = ref(null);
//显示验证组件
const sliderVerify = () => {
  // sliderVerifyRef.value.show()
};
//验证通过回调
const successHandle = (e) => {
  console.log(e);
};
//验证失败回调
const errorHandle = (e) => {
  console.log(e);
};
//组件关闭回调
const closeHandle = (e) => {
  console.log(e);
  // uni.switchTab({
  // 	url: '/pages/index/index',
  // });
};
const changeAgree = (e) => {
  if (e.detail.value.length > 0) {
    isAgree.value = true;
  } else {
    isAgree.value = false;
  }
};
const formSubmit = async (e) => {
  formInfo.username = e.detail.value.username;
  formInfo.password = e.detail.value.password;
  formInfo.phone = e.detail.value.phone;
  formInfo.confirmPassword = e.detail.value.confirmPassword;
  formInfo.payPassword = e.detail.value.payPassword;
  formInfo.code = e.detail.value.code;
  console.log(formInfo, isAgree.value);
  console.log('test.mobile(formInfo.phone)', test.mobile(formInfo.phone));

  if (!formInfo.username)
    return uni.showToast({
      title: '请输入用户名',
      icon: 'none',
    });
  if (/\s/.test(formInfo.username))
    return uni.showToast({
      title: '用户名不能存在空格',
      icon: 'none',
    });
  if (!formInfo.password)
    return uni.showToast({
      title: '请输入密码',
      icon: 'none',
    });
  if (!formInfo.phone)
    return uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    });
  if (!test.mobile(formInfo.phone))
    return uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    });
  if (!formInfo.confirmPassword)
    return uni.showToast({
      title: '请输入确认密码',
      icon: 'none',
    });
  if (!formInfo.payPassword)
    return uni.showToast({
      title: '请输入支付密码',
      icon: 'none',
    });
  if (!formInfo.code)
    return uni.showToast({
      title: '请输入邀请码',
      icon: 'none',
    });
  if (formInfo.password != formInfo.confirmPassword)
    return uni.showToast({
      title: '两次密码不一致',
      icon: 'none',
    });

  if (!isAgree.value)
    return uni.showToast({
      title: '请同意用户协议',
      icon: 'none',
    });
  let data = deepClone(formInfo);
  delete data.confirmPassword;
  const res = await AuthUtil.registerUser(data);
  console.log('注册', res);
  if (res.code == 0) {
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/index/login',
      });
    }, 3000);
  }
};
</script>
<style lang="scss" scoped>
page {
  // background: linear-gradient(to bottom, #EFF6FF, #D5DDF8);
}

.container {
  padding: 0 20rpx;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 将图片中心对齐到容器中心 */
  background-repeat: no-repeat; /* 防止图片重复 */

  .login-bg {
    position: fixed;
    top: -13%;
    left: -33%;
  }

  .login-box {
    width: 100%;
    padding: 25rpx 45rpx;
    box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border-radius: 35rpx;
    margin-top: 150rpx;
    .name {
      font-weight: bold;
      font-size: 1.5rem;
      text-align: center;
    }

    .login-from {
      margin-top: 30px;

      .form-item {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 20rpx;
        box-sizing: border-box;
        margin-bottom: 40rpx;
        border-radius: 55rpx;
        border: 1rpx solid #a2a2a2;
        // background-color: #EDF2FD;
        // box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);

        .title {
          // font-size: 15px;
          // font-weight: 550;
          font-size: 26rpx;
        }

        input {
          margin-left: 25px;
        }
      }

      .action {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
      }

      .submit-btn {
        width: 100%;
        font-weight: 550;
        margin-top: 60px;
        padding: 10rpx 0;
        border-radius: 50px;
        color: #fff;
        background-color: #950f16;
        line-height: 2.1;
        font-size: 16px;
        border: none;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.3);
      }

      .agree {
        width: 90%;
        margin-top: 10px;
        padding: 0 20px;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>